<template>
  <page-header-wrapper :title="false">
    <a-card title="商标详情">
      <a-descriptions bordered>
        <a-descriptions-item label="商标名称">
          {{tradeDetail.tm_name}}
        </a-descriptions-item>
        <a-descriptions-item label="商标类别">
          <div v-for="(item, index) in categoryOpts" :key="index">
            <div v-if="tradeDetail.category == index">{{item}}</div>
          </div>
        </a-descriptions-item>
        <a-descriptions-item label="商标注册号">
          {{tradeDetail.tm_reg_no}}
        </a-descriptions-item>
        <a-descriptions-item label="类似群组">
          {{tradeDetail.groups}}
        </a-descriptions-item>
        <a-descriptions-item label="适用商品">
          {{tradeDetail.apply_goods}}
        </a-descriptions-item>
        <a-descriptions-item label="国家">
          <div v-for="(item, index) in regionOpts" :key="index">
            <div v-if="tradeDetail.region == index">{{item}}</div>
          </div>
        </a-descriptions-item>
        <a-descriptions-item label="状态">
          <div v-for="(item, index) in statusOpts" :key="index">
            <div v-if="tradeDetail.tm_status == index">{{item}}</div>
          </div>
        </a-descriptions-item>
        <a-descriptions-item label="上传人">
          {{tradeDetail.username}}
        </a-descriptions-item>
        <a-descriptions-item label="上传时间">
          {{tradeDetail.created_at}}
        </a-descriptions-item>
        <a-descriptions-item label="下证时间">
          {{tradeDetail.end_time}}
        </a-descriptions-item>
        <a-descriptions-item label="公司成本">
          {{tradeDetail.company_cost_fee}}
        </a-descriptions-item>
        <a-descriptions-item label="官费">
          {{tradeDetail.inward_official_fee}}
        </a-descriptions-item>
        <a-descriptions-item label="售价">
          {{tradeDetail.foreign_price}}
        </a-descriptions-item>
        <a-descriptions-item label="标签">
          <div v-for="(item, index) in labelOpts" :key="index">
            <div v-if="tradeDetail.label == index">{{item}}</div>
          </div>
        </a-descriptions-item>
        <a-descriptions-item label="商标类型">
          <div v-for="(item, index) in typeOpts" :key="index">
            <div v-if="tradeDetail.tm_type == index">{{item}}</div>
          </div>
        </a-descriptions-item>
        <a-descriptions-item label="商标有效期">
          {{tradeDetail.tm_valid_time_start}} ~ {{tradeDetail.tm_valid_time_end}}
        </a-descriptions-item>
        <a-descriptions-item label="联系人电话">
          {{tradeDetail.owner_phone}}
        </a-descriptions-item>
        <a-descriptions-item label="联系人微信">
          {{tradeDetail.owner_wechat}}
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
  </page-header-wrapper>
</template>

<script>
  import { getTradeView } from '@/api/transaction'

  export default {
    name: 'WareDetail',
    data () {
      return {
        tradeDetail: {},
        categoryOpts: {},
        regionOpts: {},
        applicantOpts: {},
        labelOpts: {},
        statusOpts: {},
        typeOpts: {}
      }
    },
    activated () {
      this.getDetail(this.$route.params.id)
    },
    methods: {
      getDetail (id) {
        const app = this
        getTradeView(id).then(res => {
          if (res.status === 0) {
            app.tradeDetail = res.result.intent
            app.categoryOpts = res.result.category_opts
            app.regionOpts = res.result.tm_region_opts
            app.applicantOpts = res.result.tm_applicant_opts
            app.labelOpts = res.result.tm_label_opts
            app.statusOpts = res.result.tm_status_opts
            app.typeOpts = res.result.tm_type_opts
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
